<template>
	<div class='container' v-if="orderDetail != null">
		<nav-header></nav-header>
		<div class='page-header'>
			<span class='title'>订单明细</span>
			<img class='server-avatar' src='https://yami.yamichefs.cn/yaminew/app/admin/yami/Uploads/service/5bc05b7346d45.png' bindtap="showChat" />
		</div>
		<chat-type class="chat-type"></chat-type>
		<div class='order-datils-container'>
			<!-- <span class='order-title'>订单明细</span> -->
			<div class='custom-conatiner'>
				<div class='goods-total' v-for="(item,index) in orderDetail.goods_list" :key="item.order_id">
					<div class='goods-content'>
						<span class='title'>{{item.ck_name}}</span>
						<span class='sub-title'>{{item.start_time}}</span>
						<span class='goods-price'>{{item.unit_price}}</span>
					</div>
					<img class='goods-thumb' :src='item.item_image' mode='widthFix' />
				</div>
				<div class='panel-container'>
					<div class='panel-header'>
						<span class='title'>定制总价</span>
						<span class='price'>{{orderDetail.order_amount}}元</span>
					</div>
					<div class='panel-body'>
						<div class='item'>
							<div class='title'>宴会人数</div>
							<div class='title'>{{orderDetail.order_goods_info.item_num}}人</div>
						</div>
						<div class='item'>
							<div class='title'>人均单价</div>
							<div class='title'>{{orderDetail.order_goods_info.item_price}}元</div>
						</div>
						<div class='item' v-for="(charItem,index) in orderDetail.other_charge_list" :key="item.orther_id">
							<div class='title'>{{charItem.service_name}}</div>
							<div class='title'>{{charItem.service_orther_price}}元</div>
						</div>
					</div>
				</div>
				<div class='panel-container'>
					<div class='panel-header'>
						<span class='title'>定制地点</span>
					</div>

					<div class='panel-body'>
						<div class='item'>
							<div class='title'>{{orderDetail.address.reciver_address}}</div>
						</div>
						<div class='item'>
							<div class='title'>{{orderDetail.address.reciver_region}}</div>
						</div>
					</div>
				</div>
				<div class='panel-container'>
					<div class='panel-header'>
						<span class='title'>定制时间</span>
						<span class='price'>{{orderDetail.attend_time}}</span>
					</div>
				</div>
				<div class='panel-container'>
					<div class='panel-header'>
						<span class='title'>实际支付</span>
						<span class='price'>3999元</span>
					</div>
					<div class='panel-body'>
						<div class='item'>
							<div class='title'>预付款</div>
							<div class='title'>微信支付 20000元</div>
						</div>
						<div class='item'>
							<div class='title'>尾款</div>
							<div class='title'>500元</div>
						</div>

						<div class='item'>
							<div class='title'>下单时间</div>
							<div class='title'>{{orderDetail.creat_time}}</div>
						</div>
						<div class='item'>
							<div class='title'>订单编号</div>
							<div class='title'>{{orderDetail.order_sn}}</div>
						</div>
					</div>
				</div>
				<div v-if='orderDetail.order_label != 1'>
					<router-link class='apply-btn' v-if="orderDetail.refund_state == 0 " to="/applyRefund">
						<span>申请退款</span>
					</router-link>
					<div class='apply-btn' v-else-if="orderDetail.refund_state == 3 ">
						<span>申请中</span>
					</div>
					<div class='apply-btn' v-else>
						<span>已退款</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapGetters, mapState, mapActions, mapMutations } from 'vuex';
	import header from "@/components/header/header"
	import footorBuyBar from "@/pages/order-detail/components/footor-buy-bar"
	import chatType from '@/components/chat-type/chat-type'

	import server from '@/server/api';

	export default {
		data() {
			return {
				value: false,
				payMethod: 'weixin'
			}
		},
		computed: {
			...mapState(['orderDetail']),
			...mapGetters(['formatDate']),
		},
		components: {
			"chat-type": chatType,
			"nav-header": header,
			"footorBuyBar": footorBuyBar
		},
		mounted() {},
		created() {
			const _this = this;
			let order_label = this.$route.params.order_label;
			let param = {
				order_label: order_label,
				member_id: 101076
			}
			if(this.$route.params.all_no.substring(0, this.$route.params.all_no.indexOf("=")) == "order_id") {
				param.order_id = this.$route.params.all_no.substring(this.$route.params.all_no.indexOf("=") + 1, this.$route.params.all_no.length);

			} else {
				param.all_no = this.$route.params.all_no.substring(this.$route.params.all_no.indexOf("=") + 1, this.$route.params.all_no.length);
			}
			server.post("/index/order/order_info", param, function(res) {

				var item_num = 0;
				for(var i = 0; i < res.data.goods_list.length; i++) {
					if(res.data.order_label == 4) {
						res.data.tpl_name = "custom_order";
						res.data.attend_time = _this.formatDate(new Date(res.data.customized_time * 1000), 'yyyy年mm月dd日 hh:ii');

					} else {
						res.data.tpl_name = "activity_order";
						res.data.goods_list[i].attend_time = _this.formatDate(new Date(res.data.goods_list[i].activity.ua_start_time * 1000), 'yyyy-mm-dd');
					}
					item_num += res.data.goods_list[i].item_num;
				}
				if(res.data.order_label == 4) {
					var payedMoney = 0;
					// 计算已经支付金额
					for(var i = 0; i < res.data.pay_log.length; i++) {
						payedMoney += (res.data.pay_log[i].pay_money * 100)
					}
					payedMoney = payedMoney / 100;
					res.data.payedMoney = payedMoney;
					// 获取待支付金额
					if(res.data.project == '预付款') {
						res.data.topayMoney = res.data.deposit
					} else {
						res.data.topayMoney = res.data.order_amount - payedMoney
					}
				} else {
					res.data.topayMoney = res.data.order_amount
				}
				res.data.item_num = item_num;
				res.data.unit_price = res.data.order_amount / item_num;
				res.data.total_price = res.data.order_amount;
				_this.$store.state.orderDetail = res.data;
			})
		},
		methods: {
			...mapActions(['getOrderDetail', "getOrderDetailOther"]),
			choosePayMethod(payType) {
				if(this.payMethod != payType) {
					this.payMethod = payType
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		margin: 90px 0 0;
		padding: 0 40px;
		.page-header {
			display: flex;
			justify-content: space-between;
			padding: 0 40px 32px;
			background-color: #fff;
			box-shadow: 0 72px 200px 0 rgba(0, 0, 0, 0.08);
			.title {
				font-size: 48px;
				color: #000;
			}
			.server-avatar {
				width: 80px;
				height: 80px;
				border-radius: 50%;
			}
		}
		.order-datils-container {
			padding: 0 0px 40px;
			background-color: #fff;
			.custom-conatiner {
				.goods-total {
					display: flex;
					justify-content: space-between;
					padding: 50px 0;
					border-bottom: 1px solid #dcdcdc;
					.goods-content {
						display: flex;
						flex-direction: column;
						width: 440px;
						margin-right: 30px;
						.title {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							height: 50px;
							font-size: 36px;
							color: #4a4a4a;
							margin-bottom: 6px;
						}
						.sub-title {
							margin-bottom: 16px;
							font-size: 32px;
							color: #8A8A8A;
						}
						.goods-price {
							font-size: 30px;
							color: #8A8A8A;
						}
						.goods-thumb {
							flex-shrink: 0;
							width: 154px;
							height: 130px;
							border-radius: 8px;
						}
					}
					.goods-thumb {
						flex-shrink: 0;
						width: 154px;
						height: 130px;
						border-radius: 8px;
					}
				}
				.panel-container {
					padding: 30px 0;
					border-bottom: 2px solid #dcdcdc;
					.panel-header {
						display: flex;
						justify-content: space-between;
						align-items: center;
						height: 48px;
						margin-bottom: 18px;
						.title {
							font-size: 36px;
							color: #4a4a4a;
						}
						.price {
							font-size: 36px;
							color: #67666B;
						}
					}
					.panel-body {
						.item {
							display: flex;
							justify-content: space-between;
							height: 48px;
							margin-bottom: 16px;
							.title {
								font-size: 30px;
								color: #8A8A8A;
							}
						}
					}
				}
			}
		}
	}
	.apply-btn {
		display: block;
		height: 92px;
		margin-top: 50px;
		margin-bottom: 60px;
		border: 2px solid #e5e5e4;
		border-radius: 8px;
		font-size: 36px;
		color: #4a4a4a;
		text-align: center;
		line-height: 92px;
	}
</style>